<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
	<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
		<link rel="stylesheet" href="${cxt }/css/llp_basepage.css" />
		<script type="text/javascript" src="${cxt }/js/iconfont.js" ></script>
		<script type="text/javascript" src="${cxt }/js/llp_basicpage.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		
<style type="text/css">
	.pointer{
		cursor:pointer;
	}
	
	/* 是否删除 */
	.dialog,.adddialog,.updialog{
		position:absolute;
		top:0px;
		right:0px;
		bottom:0px;
		left:0px;
		background:rgba(0,0,0,0);
		z-index:30;
		
	}
	.dialog{
		display:none;
	}
	.adddialog{
		display:none;
	}
	.updialog{
		display:none;
	}
	.suc{
		background: #fff;
		width:240px;
		height:150ox;
		margin-top:240px;
		margin-left:470px;
		border:1px solid #fff;
	}
	.suc h3{
		width: 230px;
		padding:5px 5px;
		margin-bottom:20px;
		background-color:#808080;
	}
	.suc span{
		margin-left:80px;
		margin-top:10px;
		margin-bottom:10px;
	}
	.suc input[type=button]{
		margin-top:20px;
		background-color:#4BCF99;
		height:30px;
		color:#fff;
		margin-left: 32px;
    	font-size: 16px;
    	width: 70px;
    	margin-bottom:20px;
    	cursor:pointer;
	}
	
	.adddialog .suc span{
		margin-left:2px;
	}
	
	.updialog .suc span{
		margin-left:2px;
	}
	
	.suc input[type=text]{
		border:1px solid #4BCF9;
		width: 113px;
		margin-left:2px;
		height:20px;
	}
	
	#yc,#ycup{
		margin-left: 75px;
		color:red;
		height:20px;
		width:113px;
		margin-top:10px;
	}
	
	
	
</style>
<script type="text/javascript">
/*获取用户要删除的角色id  */
var rid="";
/* 获取增加的角色的姓名 */
var rname="";
/* 原角色名称 */
var yname="";
/* 获取修改之后的角色名称 */
var uname="";
	/*全选 */
	function getCheck(id){
		var check = document.getElementsByName("ck");
		if($("#"+id).is(":checked")){
			for(var i=0;i<check.length;i++){
				check[i].checked="checked";
			}
		}else{
			for(var i=0;i<check.length;i++){
				check[i].checked=!check[i].checked;
			}
		}
		
	}
	
	/* 判断子标签是否被还有选中的 */
	function getChild(){
		/*获取所有子标签的checked值  */
		var str="";
		var check = document.getElementsByName("ck");
		for(var i=0;i<check.length;i++){
			str += check[i].checked+",";
		}
		str = str.substring(0,str.length-1);
		var arr = str.split(",");
		for(var j=0;j<arr.length;j++){
			if(arr[j]=='true'){
				$("#box").prop("checked",true);
				return;
			}else if(j==arr.length-1){
				$("#box").prop("checked",false);
			}
		}
	}
	
	/* 获取用户选中角色的id */
	function getId(){
		rid="";
		var check = document.getElementsByName("ck");
		for(var i=0;i<check.length;i++){
			if(check[i].checked){
				rid += check[i].value+",";
			}
			
		}
		 rid = rid.substring(0,rid.length-1);
	}
	
	function show(){
		if(rid!=null&&rid.length!=0){
			$("#dialog").css("display","block");
		}else{
			$("#dialog").css("display","none");
		}
		
	}
	
	/* 获取用户是否确认删除 */
	function getSure(id){
		if(id=='yes'){
			del();
		}
		$("#dialog").css("display","none");
	}
	
	/* 获取用户是否确认添加 */
	function getaddSure(id){
		if(id=='yes'){
			rname = $("#name").val();
			if(rname==null||rname.length==0){
				$("#yc").text("名称不得为空");
			}else{
				add();
				$("#adddialog").css("display","none");
			}
			
		}else{
			rname="";
			$("#yc").text("");
			$("#name").val("");
			$("#adddialog").css("display","none");
		}
	}
	
	function addshow(){
		$("#adddialog").css("display","block");
		$("#name").focus();
	}
	/* 删除的ajax事件 */
	function del(){
		$.ajax({
			type:"get",
			url:"roledel",
			data:"rid="+rid+"",
			success:function(e){
				$("#tb").html("");
				$("#tb").html(e);
			}
		});
	}
	
	/* 增加的ajax事件 */
	function add(){
		$.ajax({
			type:"get",
			url:"ajaxadd",
			data:"rname="+rname+"",
			success:function(e){
				$("#tb").html("");
				$("#tb").html(e);
			}
		});
	}
	
	/* 获取原角色名称 */
	function getName(str){
		$("#updialog").css("display","block");
		yname=str;
		$("#upname").val(str);
	}
	
	function getupSure(id){
		if(id=='yes'){
			uname = $("#upname").val();
			if(uname!=null&&uname.length!=0){
				$("#updialog").css("display","none");
				up();
			}else{
				$("#ycup").text("名称不能为空");
			}
		}else{
			$("#updialog").css("display","none");
		}
	}
	
	/*更新的ajax事件  */
	function up(){
		$.ajax({
			type:"get",
			url:"ajaxup",
			data:"uname="+uname+"&yname="+yname+"",
			success:function(e){
				$("#tb").html("");
				$("#tb").html(e);
			}
		});
	}
</script>
</head>
<body>
	<div class="contentdiv" style="width:1250px;border:none;">
	<div class="top">
		<i class="iconfont icon-jibenshezhi"></i>
		<span> 角色管理</span>
	</div>
	<div class="center" style="width:1250px;height:655px;">
		<div class="centertop" >
			<div style="margin-top:25px;margin-right:150px;">
				<input type="button" value="+添加"  class="pointer" onclick="addshow()"/>
			</div>
			<div style="margin-top:25px;">
				<input type="button" value="-删除"  class="pointer" onclick="getId();show();"/>
			</div>
		</div>

		<div class="centerbutt" style="border:none;margin-top:20px;">
			<table border="0" cellpadding="0" cellspacing="0" id="tb">
				${str}
			</table>
		</div>
	</div>
</div>

<div class="dialog" id="dialog">
		<div class="suc">
			<h3>警告</h3>
			<span>确认删除？</span>
			<input type="button" value="是" id="yes" onclick="getSure(id)" class="pointer">
			<input type="button" value="否" id="no" onclick="getSure(id)" class="pointer">
		</div>
	</div>
	
	<div class="adddialog" id="adddialog">
		<div class="suc">
			<h3>提示</h3>
			<span>请输入名称:</span>
			<input type="text" id="name" style="border:1px solid #4BCF99;" >
			<br>
			<br>
			<span id="yc"></span>
			<br>
			<input type="button" value="是" id="yes" onclick="getaddSure(id)" class="pointer">
			<input type="button" value="否" id="no" onclick="getaddSure(id)" class="pointer">
		</div>
	</div>
	
	<div class="updialog" id="updialog">
		<div class="suc">
			<h3>提示</h3>
			<span>请输入名称:</span>
			<input type="text" id="upname" style="border:1px solid #4BCF99;" >
			<br>
			<br>
			<span id="ycup"></span>
			<br>
			<input type="button" value="是" id="yes" onclick="getupSure(id)" class="pointer">
			<input type="button" value="否" id="no" onclick="getupSure(id)" class="pointer">
		</div>
	</div>
</body>
</html>